<template>
  <div>
   <!-- <Row :gutter="20">
      <Row span="24"><h2 class="con-title">今日基本情况预览</h2></Row>
      <div style="margin: 0 auto;height: 100%;">
        <i-col  :xs="0" :md="0" :lg="1"  style="height: 120px;padding-bottom: 10px;"></i-col>
        <i-col :xs="24" :md="14" :lg="4"  style="height: 120px;padding-bottom: 10px;">
          <Card :shadow="true" class="info-card-wrapper" :padding="0">
            <div class="content-con">
              <div class="left-area" :style="{background: inforCardData[0].color,height:'110px', width: '36%',textAlign:'center',verticalAlign:'middle'}">
                <Icon  :type="inforCardData[0].icon" color="#fff" size="36" style="display: table-cell"></Icon>
              </div>
              <div class="right-area" :style="{width: '64%'}">
                <div>
                  <div class="count-to-wrapper">
                    <p class="content-outer">
                      <span  class="count-to-count-text count-style" style="font-size: 36px;line-height: 70px;font-weight:bold;">{{todayData.registerCount ? todayData.registerCount :0}}</span>
                      <i class="count-to-unit-text"></i>
                    </p>
                  </div>
                  <slot>{{inforCardData[0].title}}</slot>
                </div>
              </div>
            </div>
          </Card>
        </i-col>
        <i-col :xs="24" :md="14" :lg="9" style="height: 120px;padding-bottom: 10px;">
          <Row style="display: flex">
            <Col class="base-work-item">
              <Card style="background:rgb(61, 184, 193);" :padding=0 :bordered="false">
                <div slot="title" style="color: #fff;">订单</div>
                <Row span="24" style="padding: 2px 0">
                  <Col span="6" class="base-work-each">
                    <h6>申请订单</h6>
                    <div style="font-size: 30px;">{{todayData.applyOrderCount ? todayData.applyOrderCount : 0 }}</div>
                  </Col>
                  <Col span="6" class="base-work-each">
                    <h6>风控订单</h6>
                    <div style="font-size: 30px;">{{todayData.riskAuditPassOrderCount ? todayData.riskAuditPassOrderCount :0}}</div>
                  </Col>
                  <Col span="6" class="base-work-each">
                    <h6>结清订单</h6>
                    <div style="font-size: 30px;">{{todayData.settleOrderCount ? todayData.settleOrderCount : 0}}</div>
                  </Col>
                  <Col span="6" class="base-work-each">
                    <h6>到期订单</h6>
                    <div style="font-size: 30px;">{{todayData.expireOrderCount ? todayData.expireOrderCount : 0}}</div>
                  </Col>
                </Row>
              </Card>
            </Col>
          </Row>
        </i-col>
        <i-col :xs="24" :md="14" :lg="9" style="height: 120px;padding-bottom: 10px;">
          <Row style="display: flex">
            <Col class="base-work-item">
              <Card style="background: #fff;" :padding=0 :bordered="false">
                <div slot="title" style="color: #333;font-weight: bolder">放款数</div>
                <Row span="24" style="padding: 2px 0">
                  <Col span="8" class="base-work-each">
                    <h6 style="color:#666">新户</h6>
                    <div style="font-size: 30px;color:#333">{{todayData.newUserLoanCount ? todayData.newUserLoanCount : 0}}</div>
                  </Col>
                  <Col span="8" class="base-work-each">
                    <h6 style="color:#666">老户</h6>
                    <div style="font-size: 30px;color:#333">{{todayData.oldUserLoanCount ? todayData.oldUserLoanCount : 0}}</div>
                  </Col>
                  <Col span="8" class="base-work-each">
                    <h6 style="color:#666">待放款</h6>
                    <div style="font-size: 30px;color:#333">{{todayData.waitLoanOrderCount ? todayData.waitLoanOrderCount : 0}}</div>
                  </Col>
                </Row>
              </Card>
            </Col>
          </Row>
        </i-col>
        <i-col  :xs="0" :md="0" :lg="1"  style="height: 120px;padding-bottom: 10px;"></i-col>
        <i-col  :xs="0" :md="0" :lg="4"  style="height: 120px;padding-bottom: 10px;margin-top:10px"></i-col>
        <i-col :xs="24" :md="14" :lg="16" style="height: 120px;padding-bottom: 10px;margin-top:10px">
          <Row style="display: flex">
            <Col class="base-work-item">
              <Card style="background: #fff;" :padding=0 :bordered="false">
                <div slot="title"  style="color: #333;font-weight: bolder">催收</div>
                <Row span="24" style="padding: 8px 0 0">
                  <Col span="6" class="base-work-each">
                    <h6 style="color:#666">当天应催订单数</h6>
                    <div style="font-size: 30px;color:#333">{{collection.collectionOrderCount ? collection.collectionOrderCount : 0}}</div>
                  </Col>
                  <Col span="6" class="base-work-each">
                  <h6 style="color:#666">结清订单数</h6>
                    <div style="font-size: 30px;color:#333">{{collection.settleCollectionOrderCount ? collection.settleCollectionOrderCount : 0}}</div>
                  </Col>
                  <Col span="6" class="base-work-each">
                    <h6 style="color:#666">应催金额</h6>
                    <div style="font-size: 30px;color:#333">{{collection.collectionShouldAmount ? collection.collectionShouldAmount : 0}}</div>
                  </Col>
                  <Col span="6" class="base-work-each">
                    <h6 style="color:#666">催回金额</h6>
                    <div style="font-size: 30px;color:#333">{{collection.collectionHaveAmount ? collection.collectionHaveAmount : 0}}</div>
                  </Col>
                </Row>
              </Card>
            </Col>
          </Row>
        </i-col>
        <i-col  :xs="0" :md="0" :lg="4"  style="height: 120px;padding-bottom: 10px;margin-top:10px"></i-col>
      </div>
      <div style="clear: both"></div>
      &lt;!&ndash;<i-col :xs="12" :md="8" :lg="5"  style="height: 120px;padding-bottom: 10px;">
        <Card :shadow="true" class="info-card-wrapper" :padding="0">
          <div class="content-con">
            <div class="left-area" :style="{background: inforCardData[1].color, width: '36%',textAlign:'center',verticalAlign:'middle'}">
              <Icon  :type="inforCardData[1].icon" color="#fff" size="36" style="display: table-cell"></Icon>
            </div>
            <div class="right-area" :style="{width: '64%'}">
              <div>
                <div class="count-to-wrapper">
                  <p class="content-outer">
                    <span  class="count-to-count-text count-style">{{todayData.repaymentAmount}}</span>
                    <i class="count-to-unit-text"></i>
                  </p>
                </div>
                <slot>{{inforCardData[1].title}}</slot>
              </div>
            </div>
          </div>
        </Card>
      </i-col>&ndash;&gt;
    </Row>
    <Row style="margin-top:40px;" :gutter="20">
      <Row span="24">
        <h2 class="con-title">总计
          <span style="font-size:16px;margin-left: 100px;">注册数：<i style="color:red;">{{totalData.registerTotalCount ? totalData.registerTotalCount :0}}</i></span>
          <span style="font-size:16px;margin-left: 40px;">已回款金额：<i style="color: red;">{{(totalData.repaymentTotalAmount) ? (totalData.repaymentTotalAmount/100).toFixed(2) : 0}}</i>元</span>
          <span style="font-size:16px;margin-left: 40px;">待回款金额：<i style="color: red;">{{(totalData.waitRepaymentTotalAmount) ? (totalData.waitRepaymentTotalAmount/100).toFixed(2) : 0}}</i>元</span>
        </h2>
      </Row>
      <Row span="10">
        <Table size="large" border :columns="dataTitle" :data="data"></Table>
      </Row>
    </Row>-->
    <div class="work">
       <Row :gutter="16">
        <Col span="18" >
          <div style="width:100%;height:800px;color:#fff" class="workleft">
            <Row span="24" :gutter="16">
              <Col span="6">
                <div class="info">
                  我是哈哈哈哈哈哈哈哈
                </div>
              </Col>
              <Col span="6">
                <div class="success">
                   我是哈哈哈哈哈哈哈哈
                </div>
              </Col>
              <Col span="6">
                <div class="orange">
                   我是哈哈哈哈哈哈哈哈
                </div>
              </Col>
              <Col span="6">
                <div class="red">
                   我是哈哈哈哈哈哈哈哈
                </div>
              </Col>
           </Row>
            <Row span="24" class="todayCase">
                <Col span="20">
                   <p class="todayTit">今日基本概况</p>
                </Col>
                 <Col span="4">
                   <p class="can">查看往期</p>
                </Col>
            </Row>
           <Row style="display: flex;margin-bottom:10px">
            <Col class="base-work-item">
              <Card style="background: #fff;" :padding=0 :bordered="false">
                <div slot="title"  style="color: #333;font-weight: bolder">放款订单</div>
                <Row span="24" style="padding: 18px 0 0">
                  <Col span="6" class="base-work-each">
                    <h6 style="color:#666;margin-bottom:5px">当天应催订单数</h6>
                    <div style="font-size: 20px;color:#2db7f5">{{collection.collectionOrderCount ? collection.collectionOrderCount : 0}}</div>
                  </Col>
                  <Col span="6" class="base-work-each">
                  <h6 style="color:#666;margin-bottom:5px">结清订单数</h6>
                    <div style="font-size: 20px;color:#2db7f5">{{collection.settleCollectionOrderCount ? collection.settleCollectionOrderCount : 0}}</div>
                  </Col>
                  <Col span="6" class="base-work-each">
                    <h6 style="color:#666;margin-bottom:5px">应催金额</h6>
                    <div style="font-size: 20px;color:#2db7f5">{{collection.collectionShouldAmount ? collection.collectionShouldAmount : 0}}</div>
                  </Col>
                  <Col span="6" class="base-work-each">
                    <h6 style="color:#666;margin-bottom:5px">催回金额</h6>
                    <div style="font-size: 20px;color:#2db7f5">{{collection.collectionHaveAmount ? collection.collectionHaveAmount : 0}}</div>
                  </Col>
                </Row>
              </Card>
            </Col>
          </Row>
          <Row style="display: flex;margin-bottom:10px">
            <Col class="base-work-item">
              <Card style="background: #fff;" :padding=0 :bordered="false">
                <div slot="title"  style="color: #333;font-weight: bolder">放款订单</div>
                <Row span="24" style="padding: 18px 0 0">
                  <Col span="6" class="base-work-each">
                    <h6 style="color:#666;margin-bottom:5px">当天应催订单数</h6>
                    <div style="font-size: 20px;color:#2db7f5">{{collection.collectionOrderCount ? collection.collectionOrderCount : 0}}</div>
                  </Col>
                  <Col span="6" class="base-work-each">
                  <h6 style="color:#666;margin-bottom:5px">结清订单数</h6>
                    <div style="font-size: 20px;color:#2db7f5">{{collection.settleCollectionOrderCount ? collection.settleCollectionOrderCount : 0}}</div>
                  </Col>
                  <Col span="6" class="base-work-each">
                    <h6 style="color:#666;margin-bottom:5px">应催金额</h6>
                    <div style="font-size: 20px;color:#2db7f5">{{collection.collectionShouldAmount ? collection.collectionShouldAmount : 0}}</div>
                  </Col>
                  <Col span="6" class="base-work-each">
                    <h6 style="color:#666;margin-bottom:5px">催回金额</h6>
                    <div style="font-size: 20px;color:#2db7f5">{{collection.collectionHaveAmount ? collection.collectionHaveAmount : 0}}</div>
                  </Col>
                </Row>
              </Card>
            </Col>
          </Row>
          <Row style="display: flex;margin-bottom:10px">
            <Col class="base-work-item">
              <Card style="background: #fff;" :padding=0 :bordered="false">
                <div slot="title"  style="color: #333;font-weight: bolder">放款订单</div>
                <Row span="24" style="padding: 18px 0 0">
                  <Col span="6" class="base-work-each">
                    <h6 style="color:#666;margin-bottom:5px">当天应催订单数</h6>
                    <div style="font-size: 20px;color:#2db7f5">{{collection.collectionOrderCount ? collection.collectionOrderCount : 0}}</div>
                  </Col>
                  <Col span="6" class="base-work-each">
                  <h6 style="color:#666;margin-bottom:5px">结清订单数</h6>
                    <div style="font-size: 20px;color:#2db7f5">{{collection.settleCollectionOrderCount ? collection.settleCollectionOrderCount : 0}}</div>
                  </Col>
                  <Col span="6" class="base-work-each">
                    <h6 style="color:#666;margin-bottom:5px">应催金额</h6>
                    <div style="font-size: 20px;color:#2db7f5">{{collection.collectionShouldAmount ? collection.collectionShouldAmount : 0}}</div>
                  </Col>
                  <Col span="6" class="base-work-each">
                    <h6 style="color:#666;margin-bottom:5px">催回金额</h6>
                    <div style="font-size: 20px;color:#2db7f5">{{collection.collectionHaveAmount ? collection.collectionHaveAmount : 0}}</div>
                  </Col>
                </Row>
              </Card>
            </Col>
          </Row>
           <Row style="display: flex;margin-bottom:10px">
            <Col class="base-work-item">
              <Card style="background: #fff;" :padding=0 :bordered="false">
                <div slot="title"  style="color: #333;font-weight: bolder;border-left:3px solid red;padding-left:10px;">放款订单</div>
                <Row span="24" style="padding: 18px 0 0">
                  <Col span="6" class="base-work-each">
                    <h6 style="color:#666;margin-bottom:5px">当天应催订单数</h6>
                    <div style="font-size: 20px;color:#ed4014">{{collection.collectionOrderCount ? collection.collectionOrderCount : 0}}</div>
                  </Col>
                  <Col span="6" class="base-work-each">
                  <h6 style="color:#666;margin-bottom:5px">结清订单数</h6>
                    <div style="font-size: 20px;color:#ed4014">{{collection.settleCollectionOrderCount ? collection.settleCollectionOrderCount : 0}}</div>
                  </Col>
                  <Col span="6" class="base-work-each">
                    <h6 style="color:#666;margin-bottom:5px">应催金额</h6>
                    <div style="font-size: 20px;color:#ed4014">{{collection.collectionShouldAmount ? collection.collectionShouldAmount : 0}}</div>
                  </Col>
                  <Col span="6" class="base-work-each">
                    <h6 style="color:#666;margin-bottom:5px">催回金额</h6>
                    <div style="font-size: 20px;color:#ed4014">{{collection.collectionHaveAmount ? collection.collectionHaveAmount : 0}}</div>
                  </Col>
                </Row>
              </Card>
            </Col>
          </Row>
          </div>
        </Col>
        <Col span="6">
        <div style="width:100%;height:800px;background:#fff">
          <div style="font-size:18px;margin-bottom:10px;">订单总计</div>
          <Row span="24">
            <Col span="12" style="text-align:center">
               <i-circle :percent="20" stroke-color="#ff9900" :size="100" :stroke-linecap="round" stroke-width>
                <span class="demo-Circle-inner" style="font-size:24px">哈哈哈</span>
              </i-circle>
            </Col>
            <Col span="12" style="text-align:center">
               <i-circle :percent="80" stroke-color="#ed4014">
                <span class="demo-Circle-inner" style="font-size:24px">80%</span>
              </i-circle>
            </Col>
            <Col span="12" style="text-align:center">
               <i-circle :percent="80">
                <span class="demo-Circle-inner" style="font-size:24px">80%</span>
              </i-circle>
            </Col>
            <Col span="12" style="text-align:center"                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                >
               <i-circle :percent="80">
                <span class="demo-Circle-inner" style="font-size:24px">80%</span>
              </i-circle>
            </Col>

          </Row>
 <div id="main" style="width: 400px;height:400px;"></div>

        </div>
        </Col>
      </Row>


    </div>

  </div>
</template>

<script>
import echarts from 'echarts'
  // import { ChartPie, ChartBar } from '_c/charts'
  // import Example from './example.vue'
  export default {
    props:['aa'],
    name: 'home',
    components: {

      // Example
    },
    data () {
      return {
        data:[],
        tagL:[],
        tag: {
          'title': '工作台',
          'path': '/work'
        },
        dataTitle:[
          {
            title: '总计',
            key: 'title',
            align:'center'
          },
          {
            title: '放款',
            key: 'loanTotalCount',
            align:'center'
          },
          {
            title: '结清',
            key: 'settleTotalCount',
            align:'center'
          },
          {
            title: '逾期',
            key: 'overdueOrderTotalCount',
            align:'center'

          }
        ],
        inforCardData: [
          { title: '今日注册数', icon: 'md-person-add', count: 803, color: '#2d8cf0' },
          { title: '今日回款金额', icon: 'md-locate', count: 232, color: '#19be6b' },
          { title: '新用户放款数', icon: 'md-help-circle', count: 142, color: '#ff9900' },
          { title: '分享统计', icon: 'md-share', count: 657, color: '#ed3f14' },
          { title: '新增互动', icon: 'md-chatbubbles', count: 12, color: '#E46CBB' },
          { title: '新增页面', icon: 'md-map', count: 14, color: '#9A66E4' }
        ],
        pieData: [
          {value: 335, name: '直接访问'},
          {value: 310, name: '邮件营销'},
          {value: 234, name: '联盟广告'},
          {value: 135, name: '视频广告'},
          {value: 1548, name: '搜索引擎'}
        ],
        barData: {
          Mon: 13253,
          Tue: 34235,
          Wed: 26321,
          Thu: 12340,
          Fri: 24643,
          Sat: 1322,
          Sun: 1324
        },
        todayData:[],
        totalData:[],
        collection:{},
      }
    },
    created () {
      this.getToday();
      this.getTotal();
      this.getCollection();
    },
    mounted(){
      console.log(this.aa,'...');
      this.$store.commit('changeTag', this.tag.path);
      this.$store.commit('openPage', this.tag);
       var myChart = echarts.init(document.getElementById('main'));

    var option = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        data:[]
    },
    series: [
        {
            name:'访问来源',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ]
        }
    ]
};
 myChart.setOption(option);

    },
    methods: {
      getToday () {
        this.$post('/bkworkbench/today/data')
          .then((res) => {
            if(res.code === 0){
              console.log(res)
              this.todayData = res.data;
            }
        })
      },
      getTotal () {
        this.$post('/bkworkbench/total/data')
          .then((res) => {
            if(res.code === 0){
              console.log(res)
              this.totalData = res.data;
              this.data = [
                {
                  title:'数量',
                  loanTotalCount : this.totalData.loanTotalCount ? this.totalData.loanTotalCount : 0 ,
                  settleTotalCount : this.totalData.settleTotalCount ? this.totalData.settleTotalCount : 0 ,
                  overdueOrderTotalCount : this.totalData.overdueOrderTotalCount ? this.totalData.overdueOrderTotalCount : 0 ,
                },
                {
                  title:'金额',
                  loanTotalCount : this.totalData.loanTotalAmount ? (this.totalData.loanTotalAmount/100).toFixed(2) : 0 ,
                  settleTotalCount : this.totalData.settleTotalAmount ? (this.totalData.settleTotalAmount/100).toFixed(2) : 0,
                  overdueOrderTotalCount : this.totalData.overdueShouldTotalAmount ?  (this.totalData.overdueShouldTotalAmount/100).toFixed(2) :0,
                }
              ]
            }
          })
      },
      getCollection(){
        this.$post('/bkcollection/data')
          .then((res) => {
            if(res.code === 0){
              console.log(res,'催收');
              this.collection = res.data
            }
        })
      }
    }
  }
</script>
<style lang="less" scoped >
  .work{
    .info{
    height:200px;
    background: #2db7f5;
    font-size:18px;
    text-align: center;
    line-height: 200px;
  }
  .success{
    height:200px;
    background: #19be6b;
    font-size:18px;
    text-align: center;
    line-height: 200px;
  }
  .orange{
    height:200px;
    background: #ff9900;
    font-size:18px;
    text-align: center;
    line-height: 200px;
  }
  .red{
    height:200px;
    background: #ed4014;
    font-size:18px;
    text-align: center;
    line-height: 200px;
  }
  .todayCase{
    background: #fff;
    margin:10px 0;
    padding: 20px 0;
    color:#333;
    // height:60px;
    // line-height: 60px;
   .todayTit{
      padding-left:10px;
      font-size:16px;
      border-left:3px solid #f19a43;
    }
    .can{
      font-size:14px;
      padding-right:20px;
      text-align:right;
    }



    }
    .workRight{

    }
  }

  .common{
    float: left;
    height: 100%;
    display: table;
    text-align: center;
  }
  .size{
    width: 100%;
    height: 100%;
  }
  .middle-center{
    display: table-cell;
    vertical-align: middle;
  }
  .info-card-wrapper{
    .size;
    overflow: hidden;
    .ivu-card-body{
      height:100%;
      .size;
    }
    .content-con{
      .size;
      position: relative;
      .left-area{
        .common;
        & > .icon{
          .middle-center;
        }
      }
      .right-area{
        .common;
        & > div{
          .middle-center;
        }
      }
    }
  }
  .con-title{
    color: #000;
    line-height: 40px;
    border-left: solid 3px #20a0ff;
    padding-left: 15px;
    margin: 10px 0;
    margin-bottom: 20px;
  }
  .base-work-item{
    width: 100%;
    color: #fff;
  }
  .base-work-each{
    text-align: center;
  }
  .title {
    margin-top: 0px;
    height: 40px;
    overflow: hidden;
  }
  /deep/ .ivu-icon{
    display: table-cell;
  }
</style>
<style lang="less">
  .count-style{
    font-size: 50px;
  }
</style>
